<template>
	<div class="login-container">
		<div class="login-left">
			<div class="login-left-content">
				<div class="login-left-logo">
					<img src="http://img.pzhuweb.cn/logo.ico" />
					<span class="login-left-title">{{ getThemeConfig.globalViceTitle }}</span>
				</div>
				<div class="login-left-desc">
					<p>欢迎使用</p>
					<p>后台管理系统</p>
				</div>
			</div>
		</div>
		<div class="login-right">
			<div class="login-right-content">
				<h4 class="login-title">登 录</h4>
				<Account />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import Account from '/@/views/login/component/account.vue';

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	width: 100%;
	height: 100%;
	display: flex;
	background: var(--el-color-white);

	.login-left {
		flex: 1;
		background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
		position: relative;
		overflow: hidden;

		.login-left-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 80%;
			text-align: center;
			color: var(--el-color-white);

			.login-left-logo {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 40px;

				img {
					width: 40px;
					height: 40px;
					margin-right: 10px;
				}

				.login-left-title {
					font-size: 24px;
					font-weight: 600;
				}
			}

			.login-left-desc {
				p {
					margin: 10px 0;
					font-size: 18px;
					opacity: 0.9;
				}
			}
		}
	}

	.login-right {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--el-color-white);

		.login-right-content {
			width: 400px;
			padding: 40px;
			background: var(--el-color-white);
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.login-title {
				text-align: center;
				font-size: 24px;
				font-weight: 600;
				color: var(--el-text-color-primary);
				margin-bottom: 40px;
				letter-spacing: 12px;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.login-container {
		flex-direction: column;

		.login-left {
			display: none;
		}

		.login-right {
			.login-right-content {
				width: 90%;
				max-width: 400px;
				margin: 20px auto;
			}
		}
	}
}
</style>
